<template lang="pug">
  .radio-group.clearfix
    .radio(v-for="item in options" @click="selectRadio(item.value)" :style="style(item.value)" :class="{'readonly-radio':readonly}") {{item.label}}
</template>
<script>
export default {
  name: 'radioRender',
  components: {},
  props: ['config', 'editor', 'value', 'readonly', 'options'],
  methods: {
    selectRadio(value) {
      if (!this.readonly) {
        this.$emit('input', value)
        this.$emit('change', {value:value,device:"APP"})
      }
    },
    style(selectValue) {
      if (this.value === selectValue) {
        return 'color:#fff' + ';border-color:' + this.config.checkedColor + ';background:' + this.config.checkedColor
      } else {
        return ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .radio-group {
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid transparent;
    .radio {
      float: left;
      border: 1px solid #ccc;
      border-left: none;
      line-height: 32px;
      padding: 0 16px;
      font-size: 14px;
      background: #fff;
      color: #666;
      cursor: pointer;
      &:last-child {
        border-radius: 0 3px 3px 0;
      }
      &:first-child {
        border-left: 1px solid #ccc;
        border-radius: 3px 0 0 3px;
      }
    }
    .readonly-radio {
      color: #ccc;
      background: #f6f6f6;
      cursor: not-allowed;
    }
  }
</style>
